<template>
	<view id="reg-page">
		<view class="login-body">
			<view class="login-page-title" @click="showOpenId">{{GLOBAL.SYSTEM_TITLE}}</view>
			<view class="phone-login-box">
				<view class="login-box">
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-user"></view>
						<input class="login-input" type="text" v-model="phone"  placeholder="请输入手机号">
					</view>
					<!-- <view class="login-input-wrapper">
						<view class="icon el-icon-ali-number-code"></view>
						<view class="graph-code">
							<validate class="validate"  @success="setValidate"></validate>
						</view>
					</view> -->
					
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-sms-code"></view>
						<input class="login-input" type="text" v-model="phoneCode" placeholder="请输入短信验证码">
						<view @tap="getMsgVaildCode" class="login-get-vaild-code">{{vaildCodeText}}
						    <text v-if="vaildCodeText!=='获取验证码'">s</text>
						</view>
					</view>
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-password"></view>
						<input class="login-input" type="password" v-model="password"  placeholder="请设置你的登录密码">
					</view>
					<view class="login-input-wrapper">
						<view class="icon el-icon-ali-password"></view>
						<input class="login-input" type="password" v-model="confirmPassword"  placeholder="请确认你的登录密码">
					</view>
				</view>
				<button class="confirm-btn" @click="toFindPassword" :loading="loading" :disabled="loading">提交</button>
				<view class="other-opt-obx">
					<view class="other-opt-title" @click="toLoginPage">
						<text class="login-text">直接登录</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiSendSms,
		apiFindPassword
	} from '../../../http/apis.js'
	import Validate from '../../components/graphVerification.vue'
	export default{
		components:{
			Validate
		},
		data(){
			return {
				phone: '',//18812341234
				password: '',//qwe123
				loading: false,
				imgCode: '',
				captcha: '',
				phoneCode: '',
				inviteCode: '',
				vaildCodeText: '获取验证码',
				confirmPassword: '',
				// validateCode: ''
			}
		},
		onLoad(option){
			this.phone = uni.getStorageSync('phone') ? uni.getStorageSync('phone') : options.phone
		},
		onShow() {
		},
		methods: {
			// setValidate(resp){
			// 	this.validateCode = resp
			// },
			// resetValidate() {
			//     this.validateCode = "";
			//     LUOCAPTCHA && LUOCAPTCHA.reset();
			// },
			getMsgVaildCode(){
				if (!this.isPhoneNumRight()) {
				    return
				}
				// if (!this.validateCode) {
				// 	this.$msg.showToast('请先点击上方的验证')
				// 	return
				// }
				if (this.vaildCodeText !== '获取验证码') {
				    return
				}
				apiSendSms({
				    phone: this.phone,
				    codeType: 'pushFindPassword',
				    // captcha: this.validateCode
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.$msg.showToast(res.data.msg)
						this.vaildCodeText = 60
						let timer = setInterval(() => {
						    this.vaildCodeText = (this.vaildCodeText - 1)
						    if (this.vaildCodeText == 0) {
						        this.vaildCodeText = '获取验证码'
						        clearInterval(timer)
						    }
						}, 1000)
					} else {
						this.$msg.showToast(res.data.msg)
						// this.resetValidate()
					}          
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			toLoginPage(){
				uni.navigateTo({
				    url: '../login/login',
				})
			},
			
			async toFindPassword(){
				if(!this.isPhoneNumRight()){
					return
				}
				if(!this.isMsgCodeRight()){
					return
				}
				if (!this.isPasswordRight()) {
				    return
				}
				if(this.password != this.confirmPassword){
					this.$msg.showToast('密码不一致')
					return
				}
				this.$msg.showLoading('找回密码中')
				this.loading = true;
				
				apiFindPassword({
				    phone: this.phone,
				    newPassword: this.password,
				    phoneCode: this.phoneCode
				}).then(res =>{
					this.loading = false;	
					uni.hideLoading()
				    if(res.data.code == 1)  {
						this.$msg.showToast('找回成功')
						uni.setStorageSync('phone', this.phoneNum);
						uni.setStorageSync('password', this.password);
						setTimeout(()=>{
							uni.navigateTo({
							    url: '../login/login'
							});
						},1000)
					}         
				}).catch(res => {
					uni.hideLoading()
					this.$msg.showToast(res.data.msg)
					this.loading = false;			
				})
			},
			isPasswordRight(){
				let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
				if(!this.password){
					uni.showToast({
					  title: '密码不能为空',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				if(!reg.test(this.password)){
					uni.showToast({
					  title: '密码必须包含字母和数字，且在6~20位之间',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				return true
			},
			//校验短信验证码
			isMsgCodeRight(){
				if(!this.phoneCode){
					uni.showToast({
					  title: '请输入短信验证码',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				if(this.phoneCode.length<4){
					uni.showToast({
					  title: '验证码最短为 4 个字符',
					  icon: 'none',
					  duration: 1000
					})
					return false
				}
				return true
			},
			//校验手机号码
			isPhoneNumRight() {
			    let reg = /^(14[0-9]|13[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$$/;
			    if (!this.phone) {
					this.$msg.showToast('手机号不能为空')
			        return false
			    }
			    if (!reg.test(this.phone)) {
					this.$msg.showToast('请输入正确的手机号')
			        this.phone = ''
			        return false
			    }
			    return true
			},
		},
	
	}
</script>

<style lang="scss">
	#reg-page {
		.copy-btn {
			display: inline-block;
			background: $theme-color;
			padding: 3px 8px;
			border-radius: 5px;
		    margin-left: 5px;
			color: #fff;
			font-size: 14px;
		}
		.login-page-title {
			padding-top: 248upx;
			text-align: center;
			font-size: 70upx;
			font-family: MFLiHei_Noncommercial-Regular,MFLiHei_Noncommercial;
			font-weight: 400;
			color: rgba(255,80,1,1);
			line-height: 86upx;
		}
		.login-box {
			margin-top: 100upx;
			padding: 0 80upx;
			.login-input-wrapper {
				border-bottom: 1px solid #E8E8E8;
				margin-top: 50upx;
				position: relative;
				display: flex;
				align-items: center;
				padding-bottom: 16upx;
				.icon {
					font-size: 38upx;
					display: inline-block;
					vertical-align: super;
					color: #CFCFCF;
				}
				.login-input {
					display: inline-block;
					margin-left: 20upx;
					font-size: 30upx;
					padding: 8upx 0;
					.uni-input-placeholder {
						color:rgba(153,153,153,1);
					}
				}
				.graph-code {
					flex: 1;
					margin-left: 20upx;
				}
				.login-input-image-code {
					width: 180upx;
					height: 80upx;
					position: absolute;
					right: 0;
					top: -20upx;
				}
				.login-get-vaild-code {
					width: 180upx;
					height: 60upx;
					position: absolute;
					right: 0;
					top: -10upx;
					border-radius:6upx;
					background: $theme-background-color;
					font-size: 24upx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(255,255,255,1);
					line-height: 60upx;
					text-align: center;
				}
				
			}
		}
		.confirm-btn{
			height: 96upx;
			line-height: 96upx;
			border-radius: 10upx;
			background: $theme-background-color;
			font-size: $font-lg;
			margin: 90upx 80upx 0 80upx;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
		.other-opt-obx {
			text-align: center;
			.other-opt-title {
				font-size: 28upx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				line-height: 24upx;
				margin-top: 56upx;
				color:rgba(153,153,153,1);
				.login-text {
					color: $theme-color;
				}
			}
		}
	}
</style>


